<template>
	<view class="box bg-f7">
		<view class="bg-white padding-b-30">
			<view class="img-box">
				<image :src="info.image" mode="widthFix"></image>
			</view>
			<view class="padding-l-r-30 bg-white ">
				<view class="fs-32 color-0 fw-b title-box">{{info.title}}</view>
				<view class="color-33 fs-24">
					<text v-if="info.start_date"  class="margin-r-20">开始时间：{{info.start_date}}</text>
                    <text v-if="info.end_date">结束时间：{{info.end_date}}</text>
				</view>
			</view>
		</view>
		<view class="bg-white margin-t-20">
			<view class="padding-30">
				<view class="fs-32 fw-b color-0 margin-b-20">
					简介
				</view>

                <view v-if="info.video_file" class="margin-t-20">
                    <video style="width: 100%;" :src="info.video_file" controls="true" autoplay></video>
                </view>
                <view class="margin-t-20">
                    <u-parse :content="info.content"></u-parse>
                </view>
			</view>
		</view>
		<view class="btn-box  padding-30 align-items-center justifyContent-spaceBetween">
			<button @click="shareToFriend" class="btn-share-friend align-items-center" open-type="share">
				<image src="/static/image/culturalPropaganda/share.png" mode="widthFix" s></image>
				<view class="fs-28 color-43 margin-l-10">分享给好友</view>
			</button>
			<button  v-if="info.isBeforeStart || info.isAfterEnd || info.is_sign >0" @click="sign" class="btn-sign color-white bg-db fs-28">我要报名</button>
			<button v-else @click="sign" class="btn-sign color-white bg-43 fs-28">我要报名</button>
		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import toast from '@/components/toast/index'
	import {
        playDetail,playSign
	} from "@/api/service"
	export default {
		components: {
			toast
		},
		data() {
			return {
				info: { }
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			this.initInfo()
		},
		methods: {
			initInfo() {
                playDetail({
                    play_id: this.id
				}).then(res => {
					if (res.code == 1) {
                        let item = res.data
                        let startDate = new Date(item.start_date);
                        let endDate = new Date(item.end_date);
                        let currentDate = new Date();
                        // 判断当前日期是否在开始日期之前
                        if (currentDate < startDate) {
                            console.log("当前日期在开始日期之前");
                            item.isBeforeStart = true
                        }
                        // 判断当前日期是否在结束日期之后
                        else if (currentDate > endDate) {
                            console.log("当前日期在结束日期之后");
                            item.isAfterEnd = true
                        }
                        // 否则，当前日期在开始和结束日期之间（包含等于的情况）
                        else {
                            console.log("当前日期在开始日期和结束日期之间");
                        }
                        this.info = item
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			sign() {
				if(this.info.is_sign){
					return uni.showToast({
						icon:"none",
						title:'已报名，无需重新报名'
					})
				}

                if(this.info.isAfterEnd){
                    return  uni.showToast({
                        title:'活动已结束',
                        icon:'none'
                    })
                }
                if(this.info.isBeforeStart){
                    return  uni.showToast({
                        title:'活动还未开始',
                        icon:'none'
                    })
                }
                playSign({
                    play_id: this.info.id
				}).then(res => {
					if (res.code == 1) {
						this.getInfo()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			shareToFriend() {
				uni.shareAppMessage({
					title: this.info.title || '科普讲座详情',
					path: `/pagesA/culturalPropaganda/scienceDetails?title=${encodeURIComponent(this.info.title)}&time=${encodeURIComponent(this.info.time)}&imgSrc=${encodeURIComponent(this.info.imgSrc)}`,
					imageUrl: this.info.imgSrc,
					success: () => {
						console.log('分享给好友成功');
					},
					fail: (err) => {
						console.error('分享给好友失败', err);
					}
				});
			},
			getInfo() {
				this.$refs.toast.getInfo(true, ['您已成功报名'], '我知道了')
			}
		},
	}
</script>

<style lang="scss" scoped>
.box {
    padding-bottom: 180rpx;
}
	.img-box {
		imag {
			width: 100%;
		}
	}

	.title-box {
		padding: 30rpx 0 20rpx;
		line-height: 1.6;
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 162rpx;
		padding: 10rpx 30rpx;
		background: #FFFFFF;

		.btn-sign {
			width: 400rpx;
			height: 90rpx;
			border-radius: 45rpx;
			line-height: 90rpx;
			border: 0;
		}

		image {
			width: 38rpx;
		}

		.btn-share-friend {
			justify-content: center;
			width: 270rpx;
			height: 90rpx;
			padding: 0;
			background: #EFFBFE;
			border-radius: 45rpx;
			border: 1px solid #43ABC4;
		}

	}
</style>
